<template>
  <el-header>
    <div class="header-container">
      <div class="header-left">
        <div class="header-icon">
          <img src="./../../../assets/images/menus/query/1.png" />
        </div>

        <span class="header-title">危险化学品风险监测预警系统</span>
      </div>
      <div class="header-content">
        <div class="content-box">
          <img src="./../../../assets/images/menus/header-nav.png" />
          <span>一级导航</span>
        </div>
        <div class="content-box1">
          <img class="icon2" src="./../../../assets/images/menus/icon2.png" />
          <span>五位一体综合分析查询</span>
        </div>
        <div class="content-box">
          <img src="./../../../assets/images/menus/icon(1).png" />
          <span>一级导航</span>
        </div>
        <div class="content-box">
          <img src="./../../../assets/images/menus/icon(2).png" />
          <span>一级导航</span>
        </div>
      </div>
      <div class="header-right">
        <i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i>

        <div class="right-content">
          <i class="fa fa-user-circle-o fa-lg" aria-hidden="true"></i>
          <span>淮安市应急管理局</span>
          <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="scss" scoped>
.el-header {
  background: linear-gradient(90deg, #3d63c3 0%, #4c76cc 100%);
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0 !important;
  .header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 61px;
    .header-left {
      display: flex;
      width: 452px;
      .header-title {
        font-size: 23px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }

      .header-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-top: 11px;
        margin-left: 11px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .header-title {
        display: inline-block;
        padding-left: 14px;
      }
    }
    .header-content {
      display: flex;
      width: 560px;
      margin-right: 454px;
      .content-box1 {
        display: flex;
        width: 275px;
        height: 64px;
        background: #527bdb;
        margin-right: 14px;
        .icon2 {
          margin-left: 11px;
          margin-top: 18px;
          width: 24px;
          height: 26px;
          margin-right: 9px;
        }
        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .content-box {
        display: flex;
        width: 140px;

        img {
          margin-top: 17px;
          width: 24px;
          height: 26px;
          margin-right: 9px;
        }
        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .header-right {
      display: flex;
      width: 250px;

      .right-content {
        color: #ffffff;
        margin-left: 33px;
        .fa-angle-down {
          margin-left: 6px;
          color: #ffffff;
        }
        .fa-user-circle-o {
          margin-right: 8px;
        }
      }
      .fa-envelope-open-o {
        margin-top: 21px;
        color: #ffffff;
      }
    }
  }
}
</style>
